@import "../../styles/base";

/*商品详情*/
.ga-product-detail{
  swiper{
    height:754rpx;
  }
  .slide-image{
    @include wh(100%,754rpx);
  }

  .top-box{
    .item{
      background: $primary;
      color:#fff;
      padding:10rpx 22rpx;
      @include align-items(center);
      font-size:22rpx;
    }

    .box{
      @extend %flex;
      @include align-items(center);

      .em{
        font-style: oblique;
        font-size:36rpx;
      }

      .span1{
        font-size:20rpx;
      }
      .span2{
        margin:0 10rpx 0 15rpx;
      }
      .span3{
        font-size:40rpx;
        margin-right:10rpx;
        @include align-items(end);
      }
    }

    .num{
      color:$yellow;
    }
  }

  .type-box{
    .item{
      font-size:22rpx;
    }
    .btn{
      margin-right:20rpx;
    }
    .title{
      font-size:32rpx;
    }

    .share-box{
      @include flex(0 0 auto);
      text-align: center;
      align-self: center;
    }
    .share{
      @include wh(31rpx,34rpx);
      background: url("http://ga-1255639017.file.myqcloud.com/images/icon/share.png") center no-repeat;
      background-size: 31rpx 34rpx;
    }
  }

  .special-cell{
    background: #fff;
    padding:0 22rpx;
    @include display-flex;
    @include align-items(center);

    .gaIcon{
      margin-right:16rpx;
      @include wh(32rpx,32rpx);

      &.half{
        background: url("http://ga-1255639017.file.myqcloud.com/images/icon/half.png") no-repeat;
        background-size: 100% 100%;
      }

      &.clock{
        background: url("http://ga-1255639017.file.myqcloud.com/images/icon/clock.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .span1{
      font-size:28rpx;
      color:$primary;
      margin-right:21rpx;
    }
    .span2{
      font-size:22rpx;
      color:$gray;
    }
  }

  .mark-box{
    .item{
      font-size:22rpx;
      @include align-items(center);
    }

    .mark-list{
      li{
        @include wh(auto,20rpx,20rpx);
        float: left;
        list-style: disc;
        margin-right:32rpx;

        .dot{
          float:left;
          @include wh(10rpx,10rpx);
          margin-top:5rpx;
          @include border-radius(50%);
          background: $primary;
          margin-right:10rpx;
        }
      }
    }

    .dots{
      letter-spacing: 5rpx;
    }
  }

  .now-bargain-list{
    @include align-items(center);
    .img-box{
      @include flex(0 0 auto);
      @include wh(72rpx,72rpx,72rpx);
      @include border-radius(50%);
      border:1px solid $grayLighter;
      margin-right:13rpx;

      img{
        width:100%;
      }
    }

    .box1{
      font-size:24rpx;
      overflow: hidden;
      .p1{}
      .p2{
        color:$gray;
        @extend %ellipsis-basic;
      }
    }

    .box2{
      @include flex(0 0 auto);
      @include wh(200rpx,auto);
      text-align: right;
      font-size:24rpx;
      margin-right:43rpx;

      .p1{
        color:$primary;
      }

      .p2{
        color:$gray;
      }
    }
    .btn{
      @include flex(0 0 auto);
      font-size:24rpx;
      @include wh(90rpx,45rpx,45rpx);
    }
  }

  .h1{
    padding:20rpx 22rpx;
    font-size:23rpx;
    color:$gray;
    background: #fff;
  }

  .h2{
    padding:20rpx 22rpx 0;
    font-size:23rpx;
    background: #fff;
    font-size:30rpx;
  }

  .comment-list{
    border-top:1px solid $grayLighter;
    .item{
      background: #fff;
      padding:22rpx;
      border-bottom:1px solid $grayLighter;
    }

    .person{
      @extend %flex;

      .name{
        margin-left:15rpx;
      }

      .img-box{
        @include wh(46rpx,46rpx);
        background: $bg;
        border:1px solid $grayLighter;
        @include border-radius(50%);
        text-align: center;
        float: left;

        img{
          height:100%;
        }
      }
    }

    .con-box{
      font-size:24rpx;
      margin-top:20rpx;
      color:$gray;
    }

    .img-list{
      background: #fff;
      width:720rpx;

      .img-box{
        @include flex(0 0 auto);
        margin-top:20rpx;
        margin-right:10rpx;
        @include wh(130rpx,150rpx);
        border:1px solid $grayLighter;
        float:left;

        .img{
          height:100%;
        }
      }
    }
  }

  .link-all{
    display:block;
    text-align: center;
    background: #fff;
    padding:20rpx 22rpx;
    @extend %active;
    font-size:24rpx;
  }

  .ga-bargain-list{
    @include display-flex;
    @include flex-wrap(wrap);
    padding:0rpx 0rpx 0rpx 22rpx;
    background: #fff;

    .item{
      margin-top:25rpx;
      margin-right:20rpx;
      @include wh(221rpx,auto);
      background: #fff;

      a{
        display:block;
        height:100%;
      }
    }

    .img-box{
      border:1rpx solid $grayLighter;
      @include wh(100%,225rpx);

      img{
        height:225rpx;
      }
    }

    .con-box{
      margin:22rpx 0rpx;
      position: relative;
      font-size:22rpx;

      .p1{
        text-align: center;
        @extend %ellipsis-basic;
      }

      .p2{
        margin-top:10rpx;
        color:$gray;
      }
    }
  }

  .pro-detail{
    min-height:200rpx;
    background: #fff;
    padding:20rpx 22rpx;
    margin-bottom:10rpx;

    img{
      width:100%;
    }
  }

  .bottom{
    @extend %flex;
    @include align-items(center);
    font-size:22rpx;
    background: #fff;

    .tabs{
      @include wh(40%,100%);
      @extend %flex;
      @include align-items(center);
      text-align: center;

      .item{
        @include flex(1 1 auto);
        a{
          display:block;
          height:100%;
        }
      }

      .img{
        @include wh(38rpx,38rpx);
        margin-top:10rpx;
        margin-bottom:10rpx;
      }
    }

    .btn-box{
      @extend %flex;
      text-align: center;
      font-size:32rpx;
      color:#fff;
      @include flex(1 1 auto);
      height:100%;

      .btn1,.btn{
        line-height:1.5;
        @include flex(1 1 auto);
        background: $pinkLighter;
      }

      .btn1{
        line-height:98rpx;
      }

      .btn2{
        line-height:normal;
        width:255rpx;
        @include flex(0 0 auto);
        background: $primary;

        &.disable{
          background: $gray;
          @extend %disable;
        }
      }
    }
  }

  .ga-action-sheet{
    .ga-detail-msg{
      .img-box{
        @include wh(150rpx,150rpx);
      }

      .p1{
        color: $primary;
        font-size:30rpx;
        margin-top:10rpx;
      }

      .p2{
        margin-top:10rpx;
      }
    }

    .ga-detail-property{
      padding:0 22rpx;

      .tit{
        font-size:24rpx;
        margin-top:20px;
      }

      .property-list{
        .item{
          float:left;
          margin-right:20rpx;
          margin-top:20rpx;
          padding:10rpx;
          min-width:60rpx;
          @include border-radius(5rpx);
          text-align: center;
          background:$bg;

          &.active{
            background: $pinkLighter;
            color:#fff;
          }
        }
      }

    }

    .link-box{
      @include wh(auto,80rpx);
      margin-top:80rpx;

      .link{
        display:block;
        position: absolute;
        font-size:30rpx;
        background: $primary;
        color:#fff;
        bottom:0;
        text-align: center;
        @include wh(100%,80rpx,80rpx);
      }
    }

    .num-box{
      padding:22rpx;
      margin-top:30rpx;
      font-size:24rpx;
    }
  }
}
